<style lang="scss" scoped>
    .plan-title{
        font-size: 24px;
        padding: 40px 28px;
    }
    .service-response{
        height: 120px;
        width: 100%;
        background: $btnColor;
        display: flex;
        justify-content: center;
    }
    .service-item{
        position: relative;
        padding-right: 36px;
        color: $white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 26px;
        .s1{
            font-size: 20px;
        }
        .s2{
            font-size: 12px;
            margin-top: 3px;
        }
        &:after{
            position: absolute;
            right: 0;
            top:50%;
            transform: translate(0,-50%);
            content: '';
            width: 13px;
            height: 21px;
            background: url("/static/arrow.png");
        }
        &:last-child{
            margin-right: 0;
            padding-right: 0;
            &:after{
                content: '';
                width:0;
                height:0;
            }
        }
    }
    .hotel-list{
        padding: 33px 16px;
        background: #F6F6F6;
        .title{
            font-size: 12px;
            line-height: 20px;
            text-indent: 17px;
            .add{
                float: right;
                width: 20px;
                height: 20px;
                background: url("/static/add.png") 50% 50% no-repeat;
                margin-right: 10px;
                margin-bottom: 14px;
            }
        }
        .list{
            clear: both;
            li{
                display: flex;
                height: 60px;
                background: $white;
                border-radius: 6px;
                margin-bottom: 6px;
                align-items: center;
                padding: 0 10px 0 17px;
                justify-content: space-between;
                .name {
                    max-width: 280px;
                    font-size: 14px;
                    color: $fontColor;
                }
                .del{
                    display: inline-block;
                    width: 30px;
                    height:30px;
                    background: url("/static/less.png") 50% 50% no-repeat;
                }
            }
        }
    }
    .place-choice{
        padding-left: 27px;
        .request-wrap{
            .title{
                font-size: 12px;
                margin: 34px 0 17px 0;
            }
            .request-list{
                display: flex;
                li{
                    min-width: 100px;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    background: $default;
                    color: $gray;
                    font-size: 14px;
                    border-radius: 4px;
                    &.active{
                        background: $btnColor;
                        color: $white;
                    }
                }
            }
        }
        .choices {
            padding: 19px 0 17px 0;
            border-bottom: 1px solid #979797; /*no*/
            background: url("/static/arrow-right.png") 97% 50% no-repeat;
            &.meet-time{
                background: url("/static/schedule.png") 97% 50% no-repeat;
            }
            p.desc{
                font-size: 12px;
                color: $gray;
            }
            .choice-name{
                font-size: 14px;
                width: 90%;
                margin-bottom: 7px;
                margin-left: 1px;/*no*/
            }
            .choice-item {
                font-size: 0px; /*no*/
                color: $gray;
                width: 90%;
                margin-left: 1px;/*no*/
                .item{
                    font-size: 12px; /*no*/
                    &:after{
                        content: '\007C';
                        margin: 0 5px;
                    }
                    &:last-child{
                        &:after{
                            content: '';
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
    .date-picker{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    .others-info{
        .title{
            font-size: 14px;
            margin: 19px 0 7px 0;
            span{
                font-size: 12px;
                color: $gray;
            }
        }
        .others{
            width: 320px;
            height: 153px;
            background: $default;
            padding: 6px 10px;
            border:none;
            border-radius: 6px;
            font-size: 12px;
            box-sizing: border-box;
            resize: none;
        }
    }
    .client-info-wrap {
        background: $default;
        overflow: hidden;
        margin-top: 26px;
        margin-bottom: 82px;
        .title{
            padding: 0 27px;
            margin: 36px 0 20px 0;
            font-size: 12px;
        }
        .input-common {
            padding: 0 27px;
            display: flex;
            margin-bottom: 17px;
        }
        .showpop{
            position: relative;
            width: 93px;
            height: 40px;
            border-radius: 4px;
            font-size: 12px;
            color: $gray;
            background: $white;
            text-indent: 12px;
            line-height: 40px;
            margin-left: 8px;
            &:after{
                content:'';
                position: absolute;
                top:19px;
                right: 10px;
                border: 10px solid $white; /*no*/
                border-width: 4px 3.5px 4px 3.5px; /*no*/
                border-top-color: #000;
            }
        }
        .get-code{
            width: 93px;
            height: 40px;
            border-radius: 4px;
            font-size: 12px;
            color: $white;
            background: #000000;
            border:none;
            margin-left: 8px;
        }
    }
    .confirm-btn{
        position: absolute;
        top:10px;
        right:10px;
        font-size: 14px;
    }
    .common-btn{
        margin: 21px 28px 50px 28px;
    }
    .join-xed {
        height: 76px;
        background: #ffffff;
        text-align: center;
        color: #009CDE;
        overflow: hidden;
        p{
            font-size: 12px;
            margin-top: 16px;
            margin-bottom: 4px;
        }
        .join-link{
            display: inline-block;
            width:127px;
            height: 26px;
            font-size: 12px;
            line-height: 22px;
            border: 2px solid #009CDE;
            box-sizing: border-box;
        }
    }
</style>

<template>
    <div class="plan-price-wrap">
        <div class="plan-title">方案询价</div>
        <div class="service-response">
            <div class="service-item">
                <p class="s1">1对1</p>
                <p class="s2">顾问服务</p>
            </div>
            <div class="service-item">
                <p class="s1">5秒</p>
                <p class="s2">提交需求</p>
            </div>
            <div class="service-item">
                <p class="s1">24小时</p>
                <p class="s2">专人回访</p>
            </div>
        </div>
        <div class="hotel-list">
            <p class="title">
                目标酒店
                <span class="add"></span>
            </p>
            <ul class="list">
                <li v-for="(item,i) in hotelList" :key="i">
                    <div class="name">{{ item.name }}</div>
                    <span class="del" @click="deleteHotel(i)"></span>
                </li>
            </ul>
        </div>
    
        <div class="place-choice">
            <div class="request-wrap">
                <p class="title">需求内容</p>
                <ul class="request-list">
                    <li v-for="(item,i) in requests" :class="{active: item.selected}" :key="i" @click="chooseRequest(item)">{{ item.name }}</li>
                </ul>
            </div>
            <div class="choices" @click="setLayer('会议类型',meetTypeOptions,false)">
                <p class="choice-name">会议类型</p>
                <p class="choice-item" v-if="meetType.length">
                    <span class="item" v-for="(item,i) in meetTypeOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
                <p class="desc" v-else>选择会议类型</p>
            </div>
            <div class="choices" @click="setLayer('参会人数',meetNumOptions,false)">
                <p class="choice-name">参会人数</p>
                <p class="choice-item" v-if="meetNum.length">
                    <span class="item" v-for="(item,i) in meetNumOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
                <p class="desc" v-else>选择参会人数</p>
            </div>
            <div class="choices" @click="setLayer('会议时长',meetTimeOptions,false)">
                <p class="choice-name">会议时长</p>
                <p class="choice-item" v-if="meetTime.length">
                    <span class="item" v-for="(item,i) in meetTimeOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
                <p class="desc" v-else>选择会议时长</p>
            </div>
            <div class="choices meet-time" style="position: relative;">
                <p class="choice-name">会议时间</p>
                <el-date-picker
                    class="date-picker"
                    v-model="meetSchedule"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    >
                </el-date-picker>
                <p class="choice-item" v-if="meetSchedule.length">
                    <span class="item">{{ meetSchedule[0] | dateFormat }} - {{ meetSchedule[1] | dateFormat }}</span>
                </p>
                <p class="desc" v-else>指定会议时间</p>
            </div>
            <div class="choices" @click="setLayer('预算金额',meetAmountOptions,false)">
                <p class="choice-name">预算金额</p>
                <p class="choice-item" v-if="meetAmount.length">
                    <span class="item" v-for="(item,i) in meetAmountOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
                <p class="desc" v-else>选择预算金额</p>
            </div>
            <div class="others-info">
                <p class="title">
                    其他
                    <span>（非必填）</span>
                </p>
                <textarea v-model="others" placeholder="输入您的其他需求" class="others"></textarea>
            </div>
        </div>
        <div class="client-info-wrap">
            <p class="title">客户信息</p>
            <div class="input-common">
                <mt-field class="name-field" label="姓名" v-model="client.name"></mt-field>
                <div class="showpop" @click="showPop=true">{{ client.gender.gender || '性别' }}</div>
            </div>
            <div class="input-common">
                <mt-field label="手机号码" type="number" v-model="client.phone"></mt-field>
            </div>
            <div class="input-common">
                <mt-field label="验证码" type="number" class="name-field" v-model="client.checkCode"></mt-field>
                <button class="get-code">获取验证码</button>
            </div>
            <div class="input-common">
                <mt-field label="电子邮箱" v-model="client.email"></mt-field>
            </div>
            <div class="input-common">
                <mt-field label="希尔顿荣誉会员卡号（如有）" v-model="client.code"></mt-field>
            </div>
            <div class="join-xed">
                <p>希尔顿荣誉客会会员尊享更多礼遇</p>
                <a href="" class="join-link">免费加入 > </a>
            </div>
            <mt-button type="primary" @click="submit" class="sure-btn common-btn">提 交</mt-button>
        </div>
    
        <mt-popup
            v-model="showPop"
            position="bottom">
            <mt-picker :slots="slots" :showToolbar="true" valueKey="gender" @change="onValuesChange">
                <mt-button type="primary" class="confirm-btn" @click="showPop=false">确 定</mt-button>
            </mt-picker>
        </mt-popup>
        
        <choice v-show="showLayer" @selectItem="selectItem" :targetOptions="targetOptions"></choice>
        <footer-component activeItem="price"></footer-component>
    </div>
</template>

<script>
    import FooterComponent from '@/views/footer'
    import Choice from '@/views/choice'
    const moment = require('moment')
    export default {
        components: {
            FooterComponent,
            Choice
        },
        computed: {
            meetType: function () {
                return this.meetTypeOptions.filter(item => {
                	return item.selected
                })
            },
            meetNum: function () {
                return this.meetNumOptions.filter(item => {
                    return item.selected
                })
            },
            meetTime: function () {
                return this.meetTimeOptions.filter(item => {
                    return item.selected
                })
            },
            meetAmount: function () {
                return this.meetAmountOptions.filter(item => {
                    return item.selected
                })
            },
        },
        
        filters: {
        	dateFormat: function (value) {
                return moment(value).format('YYYY-MM-DD')
            }
        },
        data() {
            return {
            	showPop: false,
                others: '',
                showLayer: false,
                targetOptions:{
                    title: '方案询价',
                    secondTitle: '',
                    multipleChoice: false,   // 多选
                    choiceList: [],
                },
                client: {
                    name: '',
                    gender: {},
                    phone: '',
                    checkCode: '',
                    email: '',
                    code: ''
                },
                slots: [
                    {
                        values: [
                            {
                            	gender: '男',
                                value: 0
                            },
                            {
                            	gender: '女',
                                value: 1
                            }
                        	
                        ]
                    }
                ],
                meetSchedule: '',
                meetTypeOptions:[
                    {
                    	name: '公司年会',
                        selected: true
                    }
                ],
                meetNumOptions: [
                    {
                        name: '50人以下',
                        selected: false
                    }
                ],
                meetTimeOptions: [
                    {
                        name: '两天',
                        selected: false
                    }
                
                ],
                meetAmountOptions: [
                    {
                        name: '一万以上',
                        selected: false
                    }
                ],
            	hotelList: [
            		{
            	        id: '1',
                        name: '上海虹桥元一希尔顿酒店'
                    },
                    {
                        id: '1',
                        name: '上海外滩华尔道夫酒店'
                    },
                    {
                        id: '1',
                        name: '杭州千岛湖滨江希尔顿度假酒店'
                    }
                ],
                requests: [
                    {
                    	name: '会议',
                        selected: false
                    },
                    {
                    	name: '餐饮',
                        selected: false
                    },
                    {
                    	name: '住宿',
                        selected: true
                    }
                ]
            };
        },
        mounted() {
        },
        methods: {
            onValuesChange(picker, values) {
                this.client.gender = values[0]
            },
            setLayer(secondTitle,choiceList,multipleChoice){
                this.targetOptions.secondTitle = secondTitle
                this.targetOptions.choiceList = choiceList
                this.targetOptions.multipleChoice = multipleChoice
        
                this.showLayer = true
            },
            submit(){
            
            },
            deleteHotel(i){
            	this.hotelList.splice(i,1)
            },
            chooseRequest(item){
            	item.selected = !item.selected
            },
            selectItem(item){
                this.targetOptions.choiceList = item
                this.showLayer = false
            }
        }
    };
</script>

